<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, maximum-scale=1">
		<title>CRHM-HOME</title>
		{% load static %}
		<link href="{% static 'CRHMweb/css/bootstrap.min.css' %}" rel="stylesheet" type="text/css">
		<link href="{% static 'CRHMweb/css/style.css' %}" rel="stylesheet" type="text/css">
		<link href="{% static 'CRHMweb/css/font-awesome.css' %}" rel="stylesheet" type="text/css">
		<link href="{% static 'CRHMweb/css/animate.css' %}" rel="stylesheet" type="text/css">

		<!--[if lt IE 9]>
    <script src="js/respond-1.1.0.min.js"></script>
    <script src="js/html5shiv.js"></script>
    <script src="js/html5element.js"></script>
<![endif]-->

	</head>

	<body>
		
		<!--Header_section-->
		<header id="header_wrapper">
			<div class="container">
				<div class="header_box">
					<div class="logo">
						<a href="#"><img src="{% static 'CRHMweb/img/2.png' %}" alt="logo"></a>
					</div>
					<nav class="navbar navbar-inverse" role="navigation">
						<div class="navbar-header">
							<button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
						</div>
						<div id="main-nav" class="collapse navbar-collapse navStyle">
							<ul class="nav navbar-nav" id="mainNav" style="padding: 20px;">
								<li class="active">
									<a href="#hero_section" class="scroll-link">主页</a>
								</li>
								<li>
									<a href="#aboutUs" class="scroll-link">校园博客</a>
								</li>
								<li>
									<a href="#service" class="scroll-link">热门贴吧</a>
								</li>
								<li>
									<a href="#Portfolio" class="scroll-link">作品展示</a>
								</li>
								<li>
									<a href="#clients" class="scroll-link">优秀班级</a>
								</li>
								<li>
									<a href="#team" class="scroll-link">得奖作品</a>
								</li>
								<li>
									<a href="#contact" class="scroll-link">联系我们</a>
								</li>
								{% if user_account %}
								
								<div class="btn-group" role="group">
									
									<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    									<li>
    										<a href="">{{user_account}}</a>
    									</li>
    									<span class="caret"></span>
  									</button>
									<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
										<li>
											<a href="{% url 'user:my_center' user_account %}">个人中心</a>
										</li>
										<li>
										<a href="#"></a>
										</li>
										<li>
									    <a href="{% url 'CRHMweb:home' %}">退出登录</a>
									    </li>
									</ul>
									
    								
  								</div>
								{% else %}
								<li style="margin-left: 7px;"><a href="{% url 'user:login' %}">登录</a></li>
								<li style="margin-left: -16px;"><a href="{% url 'user:register' %}">注册</a></li>
								{% endif %}
							</ul>
						</div>
					</nav>
				</div>
			</div>
		</header>
		<!--Header_section-->

		<!--Hero_Section-->
		<section id="hero_section" class="top_cont_outer">
			<div class="hero_wrapper">
				<div class="container">
					<div class="hero_section">
						<div class="row">
							<div class="col-lg-5 col-sm-7">
								<div class="top_left_cont zoomIn wow animated">
									<h2>学院概况 <strong>北京网络职业学院</strong> </h2>
									<p>北京网络职业学院是经北京市教育委员会批准、国家教育部备案的一所全日制高等职业院校。学院致力于为国家、特别是北京地区互联网、大数据、人工智能等数字经济领域培养高素质技能型人才。 北京网络职业学院的前身是1993年由国家信息中心创办的中国信息大学。2015年北京网络职业学院成立，面向全国计划内招生，开展高职层次学历教育。 加快科技创新，建设网络强国、数字中国、智慧社会是十九大确立的国家战略目标。北京市作为全国的科技创新中心，对于互联网技术人才的需求量大幅领先全国，同时北京也是培养互联网技术人才最多的地区。为了适应首都地区的经济和社会发展需求，我院开设了网络安全、软件开发、大数据、人工智能、数字媒体技术等专业领域的职业教育与培训计划。</p>
									<a href="#service" class="read_more2">查看更多</a>
								</div>
							</div>
							<div class="col-lg-7 col-sm-5">
								<img src="{% static 'CRHMweb/img/p58.png' %}" class="zoomIn wow animated" alt="" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
		<!--Hero_Section-->

		<section id="aboutUs">
			<!--Aboutus-->
			<div class="inner_wrapper">
				<div class="container">
					<h2>校园博客</h2>
					<div class="inner_section">
						<div class="row">
							<div class=" col-lg-4 col-md-4 col-sm-4 col-xs-12 pull-right"><img src="{% static 'CRHMweb/img/about-img.jpg' %}" class="img-circle delay-03s animated wow zoomIn" alt=""></div>
							<div class=" col-lg-7 col-md-7 col-sm-7 col-xs-12 pull-left">
								<div class=" delay-01s animated fadeInDown wow animated">
									<h3>Lorem Ipsum has been the industry's standard dummy text ever..</h3><br/>
									<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.PageMaker including versions of Lorem Ipsum.</p> <br/>
									<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged like Aldus PageMaker including versions of Lorem Ipsum.</p>
								</div>
								<div class="work_bottom"> <span>Want to know more..</span>
									<a href="#contact" class="contact_btn">进入博客</a>
								</div>
							</div>

						</div>

					</div>
				</div>
			</div>
		</section>
		<!--Aboutus-->

		<!--Service-->
		<section id="service">
			<div class="container">
				<a href=""><h2>热门贴吧</h2></a>
				<div class="service_wrapper">
					<div class="row">
						<div class="col-lg-4">
							<div class="service_block">
								<div class="service_icon delay-03s animated wow  zoomIn"> <span><i class="fa fa-android"></i></span> </div>
								<h3 class="animated fadeInUp wow">Android</h3>
								<p class="animated fadeInDown wow">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
							</div>
						</div>
						<div class="col-lg-4 borderLeft">
							<div class="service_block">
								<div class="service_icon icon2  delay-03s animated wow zoomIn"> <span><i class="fa fa-apple"></i></span> </div>
								<h3 class="animated fadeInUp wow">Apple IOS</h3>
								<p class="animated fadeInDown wow">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
							</div>
						</div>
						<div class="col-lg-4 borderLeft">
							<div class="service_block">
								<div class="service_icon icon3  delay-03s animated wow zoomIn"> <span><i class="fa fa-html5"></i></span> </div>
								<h3 class="animated fadeInUp wow">Design</h3>
								<p class="animated fadeInDown wow">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
							</div>
						</div>
					</div>
					<div class="row borderTop">
						<div class="col-lg-4 mrgTop">
							<div class="service_block">
								<div class="service_icon delay-03s animated wow  zoomIn"> <span><i class="fa fa-dropbox"></i></span> </div>
								<h3 class="animated fadeInUp wow">Concept</h3>
								<p class="animated fadeInDown wow">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
							</div>
						</div>
						<div class="col-lg-4 borderLeft mrgTop">
							<div class="service_block">
								<div class="service_icon icon2  delay-03s animated wow zoomIn"> <span><i class="fa fa-slack"></i></span> </div>
								<h3 class="animated fadeInUp wow">User Research</h3>
								<p class="animated fadeInDown wow">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
							</div>
						</div>
						<div class="col-lg-4 borderLeft mrgTop">
							<div class="service_block">
								<div class="service_icon icon3  delay-03s animated wow zoomIn"> <span><i class="fa fa-users"></i></span> </div>
								<h3 class="animated fadeInUp wow">User Experience</h3>
								<p class="animated fadeInDown wow">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
		<!--Service-->

		<!-- Portfolio -->
		<section id="Portfolio" class="content">

			<!-- Container -->
			<div class="container portfolio_title">

				<!-- Title -->
				<div class="section-title">
					<h2>作品展示</h2>
				</div>
				<!--/Title -->

			</div>
			<!-- Container -->

			<div class="portfolio-top"></div>

			<!-- Portfolio Filters -->
			<div class="portfolio">

				<div id="filters" class="sixteen columns">
					<ul class="clearfix">
						<li>
							<a id="all" href="#" data-filter="*" class="active">
								<h5>全部</h5>
							</a>
						</li>
						<li>
							<a class="" href="#" data-filter=".ai">
								<h5>AI·人工智能</h5>
							</a>
						</li>
						<li>
							<a class="" href="#" data-filter=".bigdata">
								<h5>大数据展示</h5>
							</a>
						</li>
						<li>
							<a class="" href="#" data-filter=".hfive">
								<h5>h5展示</h5>
							</a>
						</li>
						<li>
							<a class="" href="#" data-filter=".game">
								<h5>游戏展示</h5>
							</a>
						</li>
						<li>
							<a class="" href="#" data-filter=".peri ">
								<h5>美女展示</h5>
							</a>
						</li>
					</ul>
				</div>
				<!--/Portfolio Filters -->

				<!-- Portfolio Wrapper -->
				<div class="isotope fadeInLeft animated wow" style="position: relative; overflow: hidden; height: 480px;" id="portfolio_wrapper">

					<!-- Portfolio Item -->
					<div style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four   appleIOS isotope-item">
						<div class="portfolio_img"> <img src="{% static 'CRHMweb/img/portfolio_pic1.jpg' %}" alt="Portfolio 1"> </div>
						<div class="item_overlay">
							<div class="item_info">
								<h4 class="project_name">SMS Mobile App</h4>
							</div>
						</div>
					</div>
					<!--/Portfolio Item -->

					<!-- Portfolio Item-->
					<div style="position: absolute; left: 0px; top: 0px; transform: translate3d(337px, 0px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four  design isotope-item">
						<div class="portfolio_img"> <img src="{% static 'CRHMweb/img/portfolio_pic2.jpg' %}" alt="Portfolio 1"> </div>
						<div class="item_overlay">
							<div class="item_info">
								<h4 class="project_name">Finance App</h4>
							</div>
						</div>
					</div>
					<!--/Portfolio Item -->

					<!-- Portfolio Item -->
					<div style="position: absolute; left: 0px; top: 0px; transform: translate3d(674px, 0px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four  design  isotope-item">
						<div class="portfolio_img"> <img src="{% static 'CRHMweb/img/portfolio_pic3.jpg' %}" alt="Portfolio 1"> </div>
						<div class="item_overlay">
							<div class="item_info">
								<h4 class="project_name">GPS Concept</h4>
							</div>
						</div>
					</div>
					<!--/Portfolio Item-->

					<!-- Portfolio Item-->
					<div style="position: absolute; left: 0px; top: 0px; transform: translate3d(1011px, 0px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four  android  prototype web isotope-item">
						<div class="portfolio_img"> <img src="{% static 'CRHMweb/img/portfolio_pic4.jpg' %}" alt="Portfolio 1"> </div>
						<div class="item_overlay">
							<div class="item_info">
								<h4 class="project_name">Shopping</h4>
							</div>
						</div>
					</div>
					<!-- Portfolio Item -->

					<!-- Portfolio Item -->
					<div style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 240px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four  design isotope-item">
						<div class="portfolio_img"> <img src="{% static 'CRHMweb/img/portfolio_pic5.jpg' %}" alt="Portfolio 1"> </div>
						<div class="item_overlay">
							<div class="item_info">
								<h4 class="project_name">Managment</h4>
							</div>
						</div>
					</div>
					<!--/Portfolio Item -->

					<!-- Portfolio Item -->
					<div style="position: absolute; left: 0px; top: 0px; transform: translate3d(337px, 240px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four  web isotope-item">
						<div class="portfolio_img"> <img src="{% static 'CRHMweb/img/portfolio_pic6.jpg' %}" alt="Portfolio 1"> </div>
						<div class="item_overlay">
							<div class="item_info">
								<h4 class="project_name">iPhone</h4>
							</div>
						</div>
					</div>
					<!--/Portfolio Item -->

					<!-- Portfolio Item  -->
					<div style="position: absolute; left: 0px; top: 0px; transform: translate3d(674px, 240px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four  design web isotope-item">
						<div class="portfolio_img"> <img src="{% static 'CRHMweb/img/portfolio_pic7.jpg' %}" alt="Portfolio 1"> </div>
						<div class="item_overlay">
							<div class="item_info">
								<h4 class="project_name">Nexus Phone</h4>
							</div>
						</div>
					</div>
					<!--/Portfolio Item -->

					<!-- Portfolio Item -->
					<div style="position: absolute; left: 0px; top: 0px; transform: translate3d(1011px, 240px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four   android isotope-item">
						<div class="portfolio_img"> <img src="{% static 'CRHMweb/img/portfolio_pic8.jpg' %}" alt="Portfolio 1"> </div>
						<div class="item_overlay">
							<div class="item_info">
								<h4 class="project_name">Android</h4>
							</div>
						</div>
						</a>
					</div>
					<!--/Portfolio Item -->

				</div>
				<!--/Portfolio Wrapper -->

			</div>
			<!--/Portfolio Filters -->

			<div class="portfolio_btm"></div>

			<div id="project_container">
				<div class="clear"></div>
				<div id="project_data"></div>
			</div>

		</section>
		<!--/Portfolio -->

		<section class="page_section" id="clients">
			<!--page_section-->
			<h2>优秀班级</h2>
			<!--page_section-->
			<div class="client_logos">
				<!--client_logos-->
				<div class="container">
					<ul class="fadeInRight animated wow">
						<li>
							<a href="javascript:void(0)"><img src="{% static 'CRHMweb/img/client_logo1.png' %}" alt=""></a>
						</li>
						<li>
							<a href="javascript:void(0)"><img src="{% static 'CRHMweb/img/client_logo2.png' %}" alt=""></a>
						</li>
						<li>
							<a href="javascript:void(0)"><img src="{% static 'CRHMweb/img/client_logo3.png' %}" alt=""></a>
						</li>
						<li>
							<a href="javascript:void(0)"><img src="{% static 'CRHMweb/img/client_logo5.png' %}" alt=""></a>
						</li>
					</ul>
				</div>
			</div>
		</section>
		<!--client_logos-->

		<section class="page_section team" id="team">
			<!--main-section team-start-->
			<div class="container">
				<h2>获奖作品</h2>
				<h6>得票最高的前三名</h6>
				<div class="team_section clearfix">
					<div class="team_area">
						<div class="team_box wow fadeInDown delay-03s">
							<div class="team_box_shadow">
								<a href="javascript:void(0)"></a>
							</div>
							照片
							<img src="{% static 'CRHMweb/img/team_pic1.jpg' %}" alt="">
						
						</div>
						<h3 class="wow fadeInDown delay-03s">李四</h3>
						<span class="wow fadeInDown delay-03s">作品名字</span>
						<p class="wow fadeInDown delay-03s">作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述</p>
					</div>
					<div class="team_area">
						<div class="team_box  wow fadeInDown delay-06s">
							<div class="team_box_shadow">
								<a href="javascript:void(0)"></a>
							</div>
							照片
							<img src="{% static 'CRHMweb/img/team_pic2.jpg' %}" alt="">
							
						</div>
						<h3 class="wow fadeInDown delay-06s">张三</h3>
						<span class="wow fadeInDown delay-06s">作品名字</span>
						<p class="wow fadeInDown delay-06s">作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述</p>
					</div>
					<div class="team_area">
						<div class="team_box wow fadeInDown delay-09s">
							<div class="team_box_shadow">
								<a href="javascript:void(0)"></a>
							</div>
							照片
							<img src="{% static 'CRHMweb/img/team_pic3.jpg' %}" alt="">
							
						</div>
						<h3 class="wow fadeInDown delay-09s">二花</h3>
						<span class="wow fadeInDown delay-09s">作品名字</span>
						<p class="wow fadeInDown delay-09s">作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述作品描述</p>
					</div>
				</div>
			</div>
		</section>
		<!--/Team-->
		<!--Footer-->
		<footer class="footer_wrapper" id="contact">
			<div class="container">
				<section class="page_section contact" id="contact">
					<div class="contact_section">
						<h2>联系我们</h2>
						<div class="row">
							<div class="col-lg-4">

							</div>
							<div class="col-lg-4">

							</div>
							<div class="col-lg-4">

							</div>
						</div>
					</div>
					<img src="" alt="" />
					<img src="" alt="" />
					<img src="" alt="" />
					<img src="" alt="" />
				</section>
			</div>
			<div class="container">
				<div class="footer_bottom"><span>本网站来自赵孟、赵鑫荣、李哲晨、翟栋横制作，侵权必究到底 </div>
  </div>
</footer>

<script type="text/javascript" src="{% static 'CRHMweb/js/jquery-1.11.0.min.js' %}"></script>
<script type="text/javascript" src="{% static 'CRHMweb/js/bootstrap.min.js' %}"></script>
<script type="text/javascript" src="{% static 'CRHMweb/js/jquery-scrolltofixed.js' %}"></script>
<script type="text/javascript" src="{% static 'CRHMweb/js/jquery.nav.js' %}"></script> 
<script type="text/javascript" src="{% static 'CRHMweb/js/jquery.easing.1.3.js' %}"></script>
<script type="text/javascript" src="{% static 'CRHMweb/js/jquery.isotope.js' %}"></script>
<script type="text/javascript" src="{% static 'CRHMweb/js/wow.js' %}"></script> 


<script type="text/javascript" src="{% static 'CRHMweb/js/custom.js' %}"></script>

</body>
</html>